<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>productPage</title>
</head>

<body>
    <!-- 头部导航 -->
    <nav id="product">
        <ul class="head">
            <li>您好，欢迎来到泰康保险商城</li>
            <li>官方客服：<span>4008895512转2（企业客户转3 </span></li>
        </ul>
    </nav>
    <!-- 主题搜索 -->
    <div id="sear">
        <p class="logo"><img src="./image/logo.png" alt=""></p>
        <div class="searproduct">
            <input type="text" placeholder="E生平安·百万医 " id="inordersList">
            <button id="searchOrders">搜索</button>
        </div>
        <p class="lopg-left"><img src="https://baoxian.pingan.com/pa18shopnst/nstShop/img/qiandao.bb55bde2.png" alt="">
        </p>
        <ul class="product">
            <li>首页</li>
            <li>产品中心</li>
            <li>客户服务</li>
            <li>泰康招聘</li>
        </ul>
    </div>
    <!-- 图片轮播 -->
    <div id="box">
        <ul class="box-phone">
            <li><img src="./image/7e3444c2-1926-40c7-becb-54d37dc277f6.jpg"></li>
            <li><img src="./image/82ac99e6-5a80-458b-a8c1-ff17c974f8e5 (1).jpg"></li>
            <li><img src="./image/85354ef8-872a-4380-a4a1-557eecfb8da6.jpg"></li>
            <li><img src="./image/a9760aa2-07d3-4a89-ae90-ec9a227f4384 (1).jpg"></li>
        </ul>
        <div id="pageIndex"></div>
        <div id="btnLeft">&lt;</div>
        <div id="btnRight">&gt;</div>
    </div>
    <!-- 保险产品 -->
    <div class="core">
    </div>
    <!-- 页面尾部 -->
    <div class="foot">
        <div class="foots">
            <ul class="message">
                <li>网站地图</li>
                <li>公开信息披露</li>
                <li>安全和保密</li>
                <li>投诉与建议</li>
                <li>练习我们</li>
                <li>供应商入口</li>
                <li>教育资讯供应商入口</li>
            </ul>
            <ul class="service">
                <li>服务热线<span>95522</span></li>
                <li>地址:北京市朝阳区景辉街16号院1号楼泰康集团大厦</li>
                <li>邮编:10026</li>
                <li>传真:61045995</li>
            </ul>
            <div class="code">
                <p><img src="./image/tkpc_erweima.jpg" alt="">
                    <span> 泰康保险集团官方微信</span>
                </p>
                <p><img src="./image/tkpc_erweima1.jpg" alt="">
                    <span> 泰康保险集团官方微博</span>
                </p>

            </div>
        </div>

    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            //禁止选择
            document.getElementById('box').onselectstart = function () {
                return false;
            }


            const ul = $('#box ul');
            let index = 0;
            let timeOut;


            //生成按钮并插入
            create_add_btn();
            //为所有的指示器添加点击事件
            btn_click();
            //为左右按钮加点击事件
            $('#btnLeft').click(btnLeft_click);
            $('#btnRight').click(btnRight_click);

            //起点从调用aa函数开始
            aa();
            function aa() {
                //让指示器亮起正确的灯
                $('#pageIndex div').eq(index).addClass('active').siblings().removeClass('active');
                // $('#pageIndex div').removeClass('active').eq(index).addClass('active')

                //移动完成后，index自增，控制权交回给函数aa
                index = ++index % ul.children().length;

                //函数aa只负责调度，等待3000毫秒去调用函数bb
                timeOut = setTimeout(bb, 3000);
            }
            function bb() {
                //让ul向左移动，移动index指示的li距离ul的偏移值。
                ul.stop().animate({
                    marginLeft: -ul.children().eq(index).position().left
                }, 200, function () {
                    aa();
                })
            }

            function create_add_btn() {
                //遍历所有的li
                ul.children().each(function (index) {
                    //生成按钮并插入
                    $(`<div>${index + 1}</div>`).appendTo('#pageIndex')
                })
            }

            function btn_click() {
                $('#pageIndex div').click(function (e) {
                    //1.完全停止当前的动画
                    clearTimeout(timeOut);
                    ul.stop();
                    //2.根据点击的按钮将index设置成对应的值
                    index = $(e.target).index();
                    //3.先将ul移动到合适的位置，再恢复动画的执行
                    ul.css({
                        marginLeft: -ul.children().eq(index).position().left
                    })
                    aa();
                })
            }

            function btnLeft_click() {
                //获取当前亮灯的按钮的索引值
                let i = $('#pageIndex div.active').index();
                //取得当前亮灯的按钮前一个的索引值
                i = (i + 6 - 1) % 6;
                $('#pageIndex div').eq(i).triggerHandler('click');
            }

            function btnRight_click() {
                let i = ($('#pageIndex div.active').index() + 1) % 6;
                $('#pageIndex div').eq(i).triggerHandler('click');
            }
        })
    </script>
    <script>
        const tabs = document.querySelector('.tab');
        const contents = document.querySelectorAll('.content > div');

        tabs.onclick = tab_click;

        function tab_click(e) {
            if (e.target.tagName.toLowerCase() == 'a') {
                //给当前被点击的a加active类，取消其他a的样式类
                const tabs = e.target.parentElement.children;
                for (let i = 0; i < tabs.length; i++) {
                    if (tabs[i] != e.target) {
                        tabs[i].className = '';
                        contents[i].className = '';
                    } else {
                        tabs[i].className = 'active';
                        contents[i].className = 'active';
                    }
                }
            }
        }


    </script>
</body>

</html>